<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .delicious-food {
        font-weight: 600;
        color: yellowgreen;
      }

      span {
        color: orange;
      }

      /* 只有  .delicious-food 下面的 span 会生效 */
      .delicious-food span {
        background-color: deeppink;
      }

      /* a 标签下面的 span */
      a span {
        font-size: 50px;
      }

      /* a 下面的 class 为 sp 的元素 */
      a .ss {
        font-size: 20px;
        background-color: deepskyblue;
      }
    </style>
  </head>
  <body>
    <span>^_^</span>
    <p>西兰花</p>
    <p>花菜</p>
    <p class="delicious-food">西兰花炒蛋-<span>12元</span></p>
    <button class="delicious-food">我是个按钮</button>
    <a href="" class="delicious-food">点我试试看 <span>不点就会错过</span> </a>
    <div>
      <a href="" class="delicious-food"
        >为什么不点 <span class="ss">犹豫什么呢</span>
      </a>
    </div>
  </body>
</html>
